<template>
    <div class="orderQuitServer">
      <v-header title="退款/售后"></v-header>
      <tab :animate="false" :line-width="2" active-color="#1eb7a7">
        <tab-item class="vux-center" :selected="selectTab === index" v-for="(item, index) in listTab" @on-item-click="selectTabEvery" :key="index">{{item}}</tab-item>
      </tab>
      <div>
         <scroll ref="scroll" style="overflow: hidden;height: 100%"
          :style="{height: scrollHeight + 'px'}"
           :data="listOrderList"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingDown"
            @pullingUp="onPullingUp">
              <div>
                  <div class="orderContent" v-for="item in listOrderList" :key="item.id" @click="handleOrderQuitServerDesc(item.outTradeNo)">
                      <div class="topWrapper">
                        <div>
                          <p>{{item.goodsName}}</p>
                        </div>
                        <div class="orderStatus">
                          <p>{{item.orderStatusDesc}}</p>
                           <div class="deleteWrapper" @click.stop="handleDeleteOrder(item.id)" v-if="item.orderStatus === 5 || item.orderStatus === 6">
                            <img :src="deleteImage" alt="">
                          </div>
                        </div>
                      </div>

                      <div class="imageWrapper" v-if="item.orderGoodsList.length > 1">
                          <img :src="element.goodsImage" alt="" v-for="(element, index) in item.orderGoodsList" v-if="index < 4" :key="element.index" :style="{height: imageHeight, width: imageWeight}">
                      </div>

                      <div class="imageContent" v-else>
                          <div class="imageContentLeft">
                            <img :src="element.goodsImage" alt="" v-for="element in item.orderGoodsList" :key="element.index">
                          </div>
                          <div class="shoppingDetail"> 
                            <p>
                              {{item.goodsName}}
                            </p>
                          </div>
                      </div>

                      <div class="countCacl">
                        <p>
                          共{{item.goodsSum}}件商品 <span>需付款： ¥{{item.totalAmount}}</span>
                        </p>
                      </div>
                      <div class="buttonWrapper">
                        <button class="btn" @click="toPay(item)" v-show="false">去支付</button>
                      </div>
                  </div>
                  <not-data v-if="listOrderList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getWaitPayList(true)"></not-data>
              </div>
         </scroll>
      </div>
      <router-view />
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import imageTop from '@/assets/img/default_avatar.png'
import scenicImage from '@/assets/img/scenic.png'
import hotelImage from '@/assets/img/hotel.png'
import Scroll from '@/components/scroll/scroll'
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { mapGetters, mapMutations } from 'vuex'
import deleteImage from '@/assets/img/myhome/delete.png'
import { Tab, TabItem, Grid, GridItem } from 'vux'
import nativeBridge from '@/assets/js/nativeBridge'
import notData from '@/components/not-data/not-data'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  mixins: [handleBackMixin],
  data () {
    return {
      deleteImage: deleteImage,
      imageTop: imageTop,
      scenicImage: scenicImage,
      hotelImage: hotelImage,
      listTab: ['退款中', '已退款', '退款失败'],
      scrollHeight: '500',
      listOrderList: [],
      imageHeight: '70px',
      imageWeight: '71px',
      allPopupModels: []
    }
  },
  mounted () {
    this.scrollHeight = window.innerHeight - 64 - 44
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
    this.getWaitPayList(true)
  },
  computed: {
    ...mapGetters({
      selectTab: 'orderQuitTab'
    })
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'OrderQuitServer') {
        this.pageNum = 1
        this.getWaitPayList(true)
      }
    }
  },
  methods: {
    ...mapMutations({
      setQuitOrderTab: 'SET_QUITORDER_TAB'
    }),
    handleOrderQuitServerDesc (outTradeId) {
      this.$router.push('/user/orderquitserverdesc/' + outTradeId)
    },
    // 获取全部订单，包括待付款,待收货，已取消，已完成
    getWaitPayList (isFirst) {
      const userId = localUser.get('id')
      if (userId == null) {
        return
      }
      let orderStatusId = ''
      if (this.selectTab === 0) {
        orderStatusId = 4
      } else if (this.selectTab === 1) {
        orderStatusId = 5
      } else if (this.selectTab === 2) {
        orderStatusId = 6
      }
      let url = '/v1/orders'
      axios.get(this, url, {buyerId: userId, orderStatus: orderStatusId, pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        for (var i = 0; i < data.length; i++) {
          switch (data[i].orderStatus) {
            case 4: data[i].orderStatusDesc = '退款中'
              break
            case 5: data[i].orderStatusDesc = '已退款'
              break
            case 6: data[i].orderStatusDesc = '退款失败'
          }
        }
        if (isFirst) {
          this.listOrderList = data
          return
        }
        if (data.length === 0) {
          if (this.pageNum === 1) {
            this.$refs.scroll.hiddenPullDown()
          } else {
            this.pageNum--
            this.$refs.scroll.hiddenPullUpLoad()
          }
        } else {
          if (this.pageNum > 1) {
            this.listOrderList = this.listOrderList.concat(data)
          } else {
            this.listOrderList = data
          }
        }
      })
    },
    // 点击tab所触发的操作
    selectTabEvery (value) {
      this.$refs.scroll.scrollTo(0, 0)
      this.setQuitOrderTab(value)
      this.pageNum = 1
      this.getWaitPayList(true)
    },
    toPay (item) {
      nativeBridge.alipay(item.outTradeNo, ({arg, msg}) => {
        // 支付宝支付成功回调
        if (arg === 9000) {
          if (item.goodsType === 201) {
            this.$store.commit('SET_ORDER_TAB', 2)
          } else {
            this.$store.commit('SET_ORDER_TAB', 4)
          }
          this.getWaitPayList(true)
        }
        this.$vux.toast.text(msg, 'middle')
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getWaitPayList()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getWaitPayList()
    },
    // 删除订单
    handleDeleteOrder (id) {
      const _self = this
      _self.$vux.confirm.show({
        title: '温馨提示',
        content: '你确定删除此订单吗',
        onConfirm () {
          axios.delete(_self, '/v1/order/' + id, null, (data) => {
            _self.$vux.toast.text('删除成功', 'middle')
            const idx = _self.listOrderList.findIndex(o => o.id === id)
            if (idx > -1) {
              _self.listOrderList.splice(idx, 1)
            }
          })
        }
      })
    }
  },
  components: {
    VHeader,
    Tab,
    TabItem,
    Scroll,
    localUser,
    axios,
    Grid,
    GridItem,
    notData
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.orderQuitServer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height: 100%;
}

.orderContent {
  box-shadow: 0px 0px 10px #C5C5C5;
  margin-bottom 10px
  background-color white
  &:last-child {
    margin-bottom: 0
  }
  .topWrapper {
    padding-top 10px
    padding-left 15px
    padding-bottom 10px
    padding-right 15px
    display flex
    justify-content space-between
    .orderStatus {
      display flex
      p {
        color red
      }
      .deleteWrapper {
        padding-top 3px
        padding-left 10px
        width 20px
        height 20px
      }
    }
  }
}

.imageWrapper {
  background-color #F8F8F8
  padding-top 15px
  padding-left 15px
  padding-bottom 10px
  padding-right 15px
  img {
    margin-right 10px
    width: 70px
    height 71px
    background-size: cover
    background-repeat: no-repeat
  }
}

.imageContent {
  background-color #F8F8F8
  padding-top 10px
  padding-left 15px
  padding-bottom 5px
  padding-right 15px
  display flex
  .imageContentLeft {
    img {
      width: 80px
      height 81px
      background-size: cover
      background-repeat: no-repeat
    }
  }
  .shoppingDetail {
    margin-left 10px
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

.countCacl {
  text-align right
  padding-top 5px
  padding-left 15px
  padding-bottom 10px
  padding-right 15px
  border-bottom-style solid
  border-width:1px
  border-color: #E4E4E4
}

.buttonWrapper {
  text-align right
  padding-top 10px
  padding-left 15px
  padding-bottom 10px
  padding-right 15px
  .btn {
      color: red;
      width: 70px;
      height: 33px;
      border: solid 1px red;
      border-radius 3px
      background-color: #fff;
      &:focus {
        outline: none
      }
  }
}
</style>
